<div class="editable w-100 h-100 d-flex align-items-center ps-2 pe-0 label-tag-container"
     [nzOverlayClassName]="'custom-shadow'" nz-dropdown
     [nzTrigger]="'click'"
     [nzClickHide]="false"
     [nzDropdownMenu]="descriptionDropdown"
     (nzVisibleChange)="handleVisibleChange($event, element)" #element>
  <ng-container>
    <span [innerHTML]="task.description | nzEllipsis:55:'...'" nz-tooltip [nzTooltipTitle]="descriptionTooltip"></span>
  </ng-container>
</div>

<ng-template #descriptionTooltip>
  <span nz-typography class="text-white" [innerHTML]="task.description"></span>
</ng-template>

<nz-dropdown-menu #descriptionDropdown="nzDropdownMenu">
  <div *ngIf="show" class="bg-white px-0 py-0">
    <nz-form-item class="task-description-editor-list mb-0" nz-row [style.width]="'550px'">
      <nz-form-control class="description-hover position-relative">
        <editor
          class="description-editor-list"
          [class.editing]="isEditing"
          [init]="CONFIG"
          [apiKey]="apiKey"
          [(ngModel)]="task.description"
          (onBlur)="submit()"
          #descriptionEditor
        ></editor>
      </nz-form-control>
    </nz-form-item>
  </div>
  <div class="bg-white d-flex justify-content-end p-2 border-top">
    <button nz-button nzType="primary" nzSize="small" (click)="submit()">OK</button>
  </div>
</nz-dropdown-menu>
